<template>
  <div>
    <div class="c-fc-sgray c-fs20 c-textAlign-c c-hh100 c-flex-row c-flex-center" :class="height60?'c-hh60':'c-hh100'" v-show="dataStatus == 'LOADING' || showLoading">加载中...</div>
    <div v-if="dataStatus == 'NO_MORE_DATA' || noMoreData" class=" c-fs20 c-textAlign-c c-flex-row c-flex-center" :class="[height60?'c-hh60':'c-hh100', dataStatusText]">
      我也是有底线的
    </div>
    <div class="c-textAlign-c" v-if="dataStatus == 'NO_DATA' || noData" :style="noDataStyle" :class="[isActivity == true || showNoneTemplate ? 'c-pb20' : 'c-pb120', pt20 ? 'c-pt20' : 'c-pt180']">
      <div class="c-flex-column c-aligni-center">
        <div :class="imgWidth"><img :src="isFromSearch ? require('@/assets/i/wap/course/empty.png') : noneImage" class="c-w100" alt=""></div>
        <div class="c-mt36" :class="noDataTextClass">{{noDataText}}</div>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NoneTemplate',
  props: {
    dataStatus: {
      type: String,
      default: '',
    },
    dataStatusText: {
      type: String,
      default: 'c-fc-sgray'
    },
    showLoading: Boolean,
    noMoreData: Boolean,
    noData: Boolean,
    showNoneTemplate: {
      type: Boolean,
      default: true
    },
    height60: {
      type: Boolean,
      default: false
    },
    noDataText: {
      type: String,
      default: '暂无数据',
    },
    noneImage: {
      type: String,
      default: 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/error-default-new.png'
    },
    isActivity: {
      type: Boolean,
      default: false,
    },
    pt20: {
      type: Boolean,
      default: false,
    },
    noDataTextClass: { // 底部状态栏得文字样式
      type: String,
      default: 'c-fs24 c-fc-gray'
    },
    // 图片大小
    imgWidth: {
      type: String,
      default: 'c-ww300'
    },
    noDataStyle: {
      type: String,
      default: ''
    },
    isFromSearch: {
      type: Boolean,
      default: false
    },
  },
  components: {
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
